<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>加载天地图</title>
    <link href="ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- 地图容器 -->
    <div id="mapCon"></div>
    <div>
        <button onclick="measureLength">测距</button>
        <button onclick="measureArea">测面</button>
    </div>
    <script type="text/javascript">
        var key = "4689fc6b9bc0fdc8c48298f751ebfb41";//天地图密钥

        //ol.layer.Tile：是一个瓦片图层类，用于显示瓦片资源。
        //source是必填项，用于为图层设置来源。

        //ol.source.XYZ: 
        //创建天地图矢量图层
        var TiandiMap_vec = new ol.layer.Tile({
            title: "天地图矢量图层",
            source: new ol.source.XYZ({
                url: "http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + key,
                wrapX: false
            })
        });
        //创建天地图矢量注记图层
        var TiandiMap_cva = new ol.layer.Tile({
            title: "天地图矢量注记图层",
            source: new ol.source.XYZ({
                url: "http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + key,
            })
        });
        //实例化Map对象加载地图
        var map = new ol.Map({
            //地图容器div的ID
            target: 'mapCon',
            //地图容器中加载的图层
            layers: [TiandiMap_vec, TiandiMap_cva],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点（经纬度）
                center: [0, 0],
                //地图初始显示级别
                zoom: 2,
                projection: "EPSG:3857"
            })
        });
        //添加用于绘制测量线和测量面的图层
        var measureSource = new ol.source.Vector();
        var measureLayer = new ol.layer.Vector({
            source:measureSource,
            style:new ol.style.Style({
                fill:new ol.style.Fill({
                   color:'rgba(255,255,255,0.2)',
                }),
                stroke:new ol.style.Stroke({
                    color:'#ffcc33',
                    width:2
                }),
                image:new ol.style.Circle({
                    radius:7,
                    fill:new ol.style.Fill({
                        color:'#ffcc33'
                    })
                })
            })

        });
        map.addLayer(measureLayer);

        var interactionDraw = null;//交互绘制对象
        /**
         * 添加测量方法
         * @param mType //测量类型，测距或测面积
         */
        function addMeasureFun(mType){
            interactionDraw = new ol.interaction.Draw({
                source:measureSource,//测量绘制图层源
                type:mType,
                style:new ol.style.Style({//设置绘制时的样式
                    fill:new ol.style.Fill({
                        color:'rgba(255,155,155,0.2)'
                    }),
                    stroke: new ol.style.Stroke({
                       color:'rgba(0,0,0,0.5)',
                       lineDash:[10,10],
                       width:2
                    }),
                    image:new ol.style.Circle({
                        radius:5,
                        stroke:new ol.style.Stroke({
                            color:'rgba(0,0,0,0.7)'
                        }),
                        fill:new ol.style.Fill({
                            color:'rgba(255,255,255,0.2)'
                        })
                    })
                })
            });
            map.addInteraction(interactionDraw);
        }
    </script>
    <script>
        /**
         * 测距
         */
        function measureLength(){
            if(interactionDraw!==null)
            {
                map.removeInteraction(interactionDraw); //移除绘制图形
            }
            /*createMeasureTooltip(); //创建测量工具提示框
            createHelpTooltip(); //创建帮助提示框*/
            addMeasureFun("length"); //添加绘图进行测量
        }

        /**
         * 测面积
         */
        function measureArea(){

        }
    </script>
</body>
</html>
